import 'package:flutter/material.dart';

class AppbarDemo extends StatefulWidget {
  @override
  _AppbarState createState() => _AppbarState();
}

class _AppbarState extends State<AppbarDemo> {
  static var choices = const <Choice>[
    Choice('自驾', Icons.directions_car),
    Choice('自行车', Icons.directions_bike),
    Choice('乘船', Icons.directions_boat),
    Choice('公交车', Icons.directions_bus),
    Choice('火车', Icons.directions_railway),
    Choice('步行', Icons.directions_walk)
  ];

  Choice _selectedChoice;

  void _select(Choice choice) => setState(() => _selectedChoice = choice);

  @override
  void initState() {
    super.initState();
    // 初始化状态
    _selectedChoice = choices[0];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('滴滴出行'),
        actions: <Widget>[
          IconButton(
            icon: Icon(choices[0].icon),
            onPressed: () => _select(choices[0]),
          ),
          IconButton(
            icon: Icon(choices[1].icon),
            onPressed: () => _select(choices[1]),
          ),
          PopupMenuButton<Choice>(
            onSelected: _select,
            itemBuilder: (BuildContext context) =>
                choices.skip(2).map<PopupMenuItem<Choice>>((Choice choice) {
              return PopupMenuItem<Choice>(
                value: choice,
                child: Text(choice.title),
              );
            }).toList(),
          )
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Card(
          //可以使用SizedBox来限制Card的大小
          color: Colors.white,
          child: Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              //主轴占用的空间
              crossAxisAlignment: CrossAxisAlignment.center,
              //水平居中
              children: <Widget>[
                Icon(
                  _selectedChoice.icon,
                  size: 128.0,
                  color: Theme.of(context).textTheme.headline4.color,
                ),
                Text(
                  _selectedChoice.title,
                  style: Theme.of(context).textTheme.headline4,
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Choice {
  const Choice(this.title, this.icon);

  final String title;
  final IconData icon;
}
